import { defineComponent, computed, toRefs } from 'vue'
import { COLUMN_TYPES } from '../util/constant'
import VeIcon from 'amtf/components/icon'
import { ICON_NAMES } from 'amtf/constants'
import { use样式 } from 'amtf/hooks'
import {
  getValByUnit,
  拼组件名,
  isFunction,
  isBoolean,
  getRandomId,
} from 'amtf/utils'

const 主名 = 'table-expand-tr-icon'
const 组件名 = 拼组件名(主名)

export default defineComponent({
  name: 组件名,
  props: {
    column: {
      type: Object,
      required: true,
    },
    expandOption: {
      type: Object,
      default: () => null,
    },
    rowData: {
      type: Object,
      required: true,
    },
    expandedRowkeys: {
      type: Array,
      default: () => [],
    },
    rowKeyFieldName: {
      type: String,
      default: null,
    },
    cellClick: {
      type: Function,
      default: null,
    },
  },
  setup(props) {
    const { 拼样式名_table直属 } = use样式(主名)

    const { column, rowData, expandedRowkeys, rowKeyFieldName, cellClick } =
      toRefs(props)

    const isExpanded = computed(() => {
      if (column.value.type === COLUMN_TYPES.EXPAND) {
        const rowKey = rowData.value[rowKeyFieldName.value]
        return expandedRowkeys.value.includes(rowKey)
      }
      return false
    })

    const expandRowIconContainerClass = computed(() => ({
      [拼样式名_table直属('row-expand-icon')]: true,
      [拼样式名_table直属('expand-icon-collapsed')]: isExpanded.value,
    }))

    return () =>
      column.value.type === COLUMN_TYPES.EXPAND && (
        <span
          onClick={(e) => cellClick.value(e)}
          className={expandRowIconContainerClass.value}
        >
          <VeIcon name={ICON_NAMES.RIGHT_ARROW} />
        </span>
      )
  },
})
